<template>
  <div class="mainViewBig " v-bind:style="style">
    <nx-full-screen class="allfull screenfull" style="text-align: left"></nx-full-screen>
    <!--头部-->
    <div class="headerTop">
      <h1 class="header-title">威尔研究院·分析测试中心</h1>
      <div class="header-bg"></div>
      <div class="TimeForm">
        <p class="date">{{nowDate}} {{nowWeek}}</p>
        <p class="date">
          <img :src="weatherImg"/>{{weather}}
        </p>
      </div>
      <div class="TimeForm2">
        <p class="date">{{nowTime}}</p>
      </div>
    </div>
    <div class="main_new">
      <!--左 侧 列-->
      <div class="content-item1">
        <!--模块一  年度汇总-->
        <div class="item1-module1">
          <div class="module-top">
            <h2 class="module-title">年度汇总</h2>
          </div>
          <div class="module-body">
            <!--左侧数量-->
            <div class="mession">
              <div class="mession-data1">
                <img class="left-icon1" src="@/assets/img/itemIcon_1.png">
                <div class="number">
                  <p class="right-num right-num1"><span>{{yearSample.hasTestSample}}</span>个</p>
                  <p class="wrong-num">年度已检样品</p>
                </div>
              </div>
              <div class="mession-data1">
                <img class="left-icon1" src="@/assets/img/itemIcon_2.png">
                <div class="number">
                  <p class="right-num right-num2"><span>{{yearSample.errorTate}}</span>%</p>
                  <p class="wrong-num">年度差错率</p>
                </div>
              </div>
            </div>
            <!--右侧饼图-->
            <div class="echart1" ref="echart1"></div>
          </div>
        </div>
        <!--模块二  月度样品检测统计-->
        <div class="item1-module2">
          <div class="module-top">
            <h2 class="module-title">月度样品检测统计</h2>
          </div>
          <div class="module-body">
            <li>
              <p class="mouth">年月</p>
              <p class="total">检测中</p>
              <p class="yj">已检</p>
              <p class="wj">未检</p>
            </li>
            <li v-for="(item,index) in testStats" :key="index" class="list">
              <p class="mouth">{{item.startTime}}</p>
              <p class="total">{{item.counting}}</p>
              <p class="yj">{{item.counted}}</p>
              <p class="wj" :class="{'nodate':item.unCount == 0}">{{item.unCount}}</p>
            </li>
          </div>
        </div>
        <!--模块三  月度检测排名-->
        <div class="item1-module3">
          <div class="module-top">
            <h2 class="module-title">月度检测排名</h2>
          </div>
          <div class="module-body">
            <!--工作量排行-->
            <div class="body-left">
              <div class="icons">
                <img src="@/assets/img/paihang1.png"/>
                <p class="txt">工作量</p>
                <p class="dw">小时</p>
              </div>
              <ul class="workTable">
                <li v-for="(item,index) in workHourTable" :key="index">
                  <p class="workPart1">{{index+1}}</p>
                  <p class="workPart2">{{item.userName}}</p>
                  <p class="workPart3">{{item.hours}}</p>
                </li>
              </ul>
            </div>
            <!--及时率排行-->
            <div class="body-right">
              <div class="icons">
                <img src="@/assets/img/paihang2.png"/>
                <p class="txt">及时率</p>
                <p class="dw">%</p>
              </div>
              <ul class="workTable">
                <li v-for="(item,index) in rateTable" :key="index">
                  <p class="workPart1">{{index+1}}</p>
                  <p class="workPart2">{{item.userName}}</p>
                  <p class="workPart3">{{item.effect}}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>

      <!--中间列-->
      <div class="content-item2">
        <div class="middle">
          <!-- 时间日期-->
          <div class="module-top">
            <h2 class="module-title">中心概况</h2>
          </div>
          <div class="module-body">
            <div class="middleLeft">
              <div class="state">
                <img src="@/assets/img/steadyRyn.png"/>
                <div class="DateForm">
                  <p> 稳定运行 </p>
                  <p><span>{{timestap}}</span> 天</p>
                </div>
              </div>

              <div class="lastTxt">
                <div class="line_p">
                    <span>质量方针：</span><p>公平公正、准确及时、持续改进</p>
                </div>
                <div class="line_p">
                    <span>质量目标：</span><p>及时率>85%，差错率＜0.5%，持证上岗率100%，满意度大于95分</p>
                </div>
              </div>
            </div>
            <div class="middleRight">
              <p>
                <img src="@/assets/img/middle_1.png">
                <span class="spanLeft">收载样品：</span>
                <span class="spanRight">{{methodAndPersonAndSample.sampleCount}}</span>
                <span class="dw">个</span>
              </p>
              <p>
                <img src="@/assets/img/middle_2.png">
                <span class="spanLeft">分析方法：</span>
                <span class="spanRight">{{methodAndPersonAndSample.methodCount}}</span>
                <span class="dw">个</span>
              </p>
              <p>
                <img src="@/assets/img/middle_3.png">
                <span class="spanLeft">分析人员：</span>
                <span class="spanRight">{{methodAndPersonAndSample.staffCount}}</span>
                <span class="dw">名</span>
              </p>
              <p>
                <img src="@/assets/img/middle_4.png">
                <span class="spanLeft">持证上岗：</span>
                <span class="spanRight">100</span>
                <span class="per dw">%</span>
              </p>
            </div>
          </div>
        </div>
        <!--中间表格 实时送样信息-->
        <div class="bottom">
          <div class="module-top">
            <h2 class="module-title">实时送样信息</h2>
          </div>
          <div class="module-body module-table">
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <th class="td1">送样时间</th>
                <th class="td2">样品名称</th>
                <th class="td3">样品批号</th>
                <th class="td4">送样人</th>
                <th class="td5">送样组</th>
              </tr>
              <tr v-for="(item,index) in sampleTable" :key="index">
                <td class="td1"><p class="listTime">{{item.createTimeMinFt}}</p></td>
                <td class="td2"><p class="listName" :title="item.materialName">{{item.materialName}}</p></td>
                <td class="td3"><p class="list3" title="item.sampleNum">{{item.sampleNum}}</p></td>
                <td class="td4">
                  <p class="list4" v-if="item.userName !='未送样'">{{item.userName}}</p>
                  <p class="list4 wsy" v-else>{{item.userName}}</p>
                </td>
                <td class="td5"><p class="list5">{{item.deptName}}</p></td>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <!--右侧列-->
      <div class="content-item3">
        <!--模块一 轮播图-->
        <div class="item3-module1">
          <div class="module-top">
            <h2 class="module-title">中心实景</h2>
          </div>
          <div class="module2-body">
            <div class="item3-moduleImg">
                <el-carousel height="100%">
                  <el-carousel-item v-for="(item,index) in Img" :key="index">
                    <img class="lunboImg" :src="item.src">
                  </el-carousel-item>
                </el-carousel>
            </div>
          </div>
        </div>
        <!--模块二 柱状图-->
        <div class="item3-module2">
          <div class="module-top">
            <h2 class="module-title">部门科室月度送样</h2>
          </div>
          <div class="module2-body">
            <div class="mode1" :class="{'isshow': firstDeptSample.show}">
              <p class="chart_left" >{{firstDeptSample.moth}}</p>
              <div class="echart3" ref="echart3"></div>
            </div>
            <div class="mode2" :class="{'isshow': secondDeptSample.show}" style="display: none">
              <span class="chart_left">{{secondDeptSample.moth}}</span>
              <div class="echart3" ref="echart4"></div>
            </div>
            <div class="mode2" :class="{'isshow': thirdDeptSample.show}" style="display: none">
              <span class="chart_left">{{thirdDeptSample.moth}}</span>
              <div class="echart3" ref="echart5"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import resize from '@/js/resize'
  import echartOption from '@/js/echartOptionNew'
  import "@/styles/bigScreenNew.scss"
  import nxFullScreen from '@/components/nx-full-screen/index'
  import {formatDate} from '@/utils/formatDate'
  import {sortSpecial} from '@/utils/common'
  import {sortS} from '@/utils/common'
  import axios from 'axios'

  export default {
    name: 'bigScreen',
    components: {
      nxFullScreen
    },
    data() {
      return {
        sampleTable: [],
        workHourTable: [],
        rateTable: [],
        yearSample: {},
        timestap: 0,
        methodAndPersonAndSample: {},
        style: {}, //缩放样式
        nowTime: new Date(),
        nowDate: new Date(),
        nowWeek: new Date(),
        Img: [],
        testStats: [],

        firstDeptSample: {
          show: true,
          depts:[],
          moth:'',
          data:[],
        },
        secondDeptSample: {
          show: true,
          depts:[],
          moth:'',
          data:[],
        },
        thirdDeptSample: {
          show: true,
          depts:[],
          moth:'',
          data:[],
        },
        weatherImg:require('@/assets/img/qingtian.png'),
        weather:''
      }
    },
    methods: {
      pageShow() { //页面初始宽高显示 和 页面大小改变监听
        this.style = resize.setScale();
        window.onresize = () => {
          this.style = resize.setScale();
        }
      },
      getdateFormat() { //显示时间
        var _this = this;
        let wk = new Date().getDay()
        let yy = String(new Date().getFullYear())
        let mm = new Date().getMonth() + 1
        let dd = String(new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate())
        let hou = String(new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours())
        let min = String(new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes())
        let sec = String(new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds())
        let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        let week = weeks[wk]

        _this.nowTime = hou + ':' + min + ':' + sec;
        _this.nowDate = yy + '.' + mm + '.' + dd
        _this.nowWeek = week
      },
      getEchartData1(checkNum1, checkNum2) { //echart1 年度汇总
        let echart1 = this.$echarts.init(this.$refs.echart1);
        // 计算图形占比 ，直接checkNum1代入在检样品数，checkNum2代入未检样品数
        echartOption.optionNew1.series[0].data[0].value = 0;
        echartOption.optionNew1.series[0].data[1].value = (checkNum1 * 60) / (checkNum1 + checkNum2);
        echartOption.optionNew1.series[0].data[2].value = (checkNum2 * 60) / (checkNum1 + checkNum2);
        // legend图例组件赋值   \n换行
        echartOption.optionNew1.legend.data = ['在检：' + checkNum1, '    未检：' + checkNum2]
        echartOption.optionNew1.series[0].data[1].name = '在检：' + checkNum1
        echartOption.optionNew1.series[0].data[2].name = '    未检：' + checkNum2
        echart1.setOption(echartOption.optionNew1)
      },

      setFullScreen() {
        this.$http({
          url: "/drug/fullScreen/setScreenFull",
          method: "post",
        }).then(resp => {

        });
      },
      getBigScreenSampleList() {
        let self = this;
        this.$http({
          url: "/drug/bigScreen/querySampleBigScreenList",
          method: "post",
        }).then(resp => {
          self.sampleTable = resp.result;
        });
      },
      getMethodAndPersonAndSampleCount() {
        let self = this;
        this.$http({
          url: "/drug/bigScreen/queryMethodAndPersonAndSampleCount",
          method: "post",
        }).then(resp => {
          self.methodAndPersonAndSample = resp.result;
        });
      },
      getWorkHour() {
        let self = this;
        let year = formatDate(new Date(), "yyyy");
        let moth = formatDate(new Date(), "MM");
        let day = year + "-" + moth + "-01";
        let endDay = year + "-" + moth + "-31";
        this.$http({
          url: "/drug/bigScreen/queryWorkHour",
          method: "post",
          params: {startTime: day, endTime: endDay}
        }).then(resp => {
          for(let data of resp.result){
              let hours = data.hours+"";
              if(hours.indexOf(".") < 0){
                data.hours =hours+".0";
              }
          }
          self.workHourTable = resp.result;
        });
      },
      getMothRate() {
        let self = this;
        let year = formatDate(new Date(), "yyyy");
        let moth = formatDate(new Date(), "MM");
        let day = year + "-" + moth + "-01";
        let endDay = year + "-" + moth + "-31 23:59:59";
        this.$http({
          url: "/drug/bigScreen/queryMothRate",
          method: "post",
          params: {startTime: day, endTime: endDay}
        }).then(resp => {
          self.rateTable = resp.result;
        });
      },
      getYearSample() {
        let self = this;
        let day = formatDate(new Date(), "yyyy");
        day = day + "-01-01";
        this.$http({
          url: "/drug/bigScreen/queryYearSample",
          method: "post",
          params: {startTime: day}
        }).then(resp => {
          self.yearSample = resp.result;
          self.getEchartData1(resp.result.testingSample, resp.result.noTestSample)
        });
      },
      queryMothSampleSeasonTotal() {
        let self = this;
        this.$http({
          url: "/drug/bigScreen/queryMothSampleSeasonTotal",
          method: "post",
        }).then(resp => {
          self.testStats = resp.result;
        });
      },
      getMothTotal() {
        let self = this;
        // self.firstDeptSample.show = false;
        // self.secondDeptSample.show = false;
        // self.thirdDeptSample.show = false;
        this.$http({
          url: "/drug/bigScreen/queryMothTotal",
          method: "post",
        }).then(resp => {
          console.log('----queryMothTotal-----');
          console.log(resp);
          let mothSet = new Set();
          let mothMap = {};
          for (let data of resp.result) {
            mothSet.add(data["startTime"]);
            if(mothMap[data["startTime"]]){
              mothMap[data["startTime"]].push(data)
            }else{
              mothMap[data["startTime"]] = [data];
            }
          }
          let mothList = sortS(Array.from(mothSet), true);
          for(let i=0;i <mothList.length;i++){
            let key = mothList[i];
            if(i == 0){
              let md = mothMap[key];
              self.firstDeptSample.show = true;
              self.firstDeptSample.moth = key;
              let deptNames = [];
              let datas = [];
              for(let dt of md){
                deptNames.push(dt.deptName);
                datas.push(dt.counts);
              }
              self.firstDeptSample.depts = deptNames;
              self.firstDeptSample.data = datas;
            }
            // if(i == 1){
            //   let md = mothMap[key];
            //   self.secondDeptSample.show = true;
            //   self.secondDeptSample.moth = key;
            //   let deptNames = [];
            //   let datas = [];
            //   for(let dt of md){
            //     deptNames.push(dt.deptName);
            //     datas.push(dt.counts);
            //   }
            //   self.secondDeptSample.depts = deptNames;
            //   self.secondDeptSample.data = datas;
            // }
            // if(i == 3){
            //   let md = mothMap[key];
            //   self.thirdDeptSample.show = true;
            //   self.thirdDeptSample.moth = key;
            //   let deptNames = [];
            //   let datas = [];
            //   for(let dt of md){
            //     deptNames.push(dt.deptName);
            //     datas.push(dt.counts);
            //   }
            //   self.thirdDeptSample.depts = deptNames;
            //   self.thirdDeptSample.data = datas;
            // }
          }
          let echart3 = this.$echarts.init(this.$refs.echart3);
          let echart4 = this.$echarts.init(this.$refs.echart4);
          let echart5 = this.$echarts.init(this.$refs.echart5);
          if(self.firstDeptSample.show){
            echartOption.option3.yAxis.data = self.firstDeptSample.depts;
            echartOption.option3.series[0].name = self.firstDeptSample.moth;
            echartOption.option3.series[0].data = self.firstDeptSample.data;
            echart3.setOption(echartOption.option3)
          }
          if(self.secondDeptSample.show){
            echartOption.option4.yAxis.data = self.secondDeptSample.depts;
            echartOption.option4.series[0].name = self.secondDeptSample.moth;
            echartOption.option4.series[0].data = self.secondDeptSample.data;
            echart4.setOption(echartOption.option4)
          }
          if(self.thirdDeptSample.show){
            echartOption.option5.yAxis.data = self.thirdDeptSample.depts;
            echartOption.option5.series[0].name = self.thirdDeptSample.moth;
            echartOption.option5.series[0].data = self.thirdDeptSample.data;
            echart5.setOption(echartOption.option5)
          }
        });
      },
      getPictureList() {
        let self = this;
        self.$http({
          url: "/drug/images/queryImagesList",
          method: "post",
          params: {fileType: "1", fileCheck: "1"}
        }).then(resp => {
          if (resp.success) {
            self.Img = [];
            for (let data of resp.result) {
              let src = {src: data.fileBlob};
              self.Img.push(src);
            }
          }
        });
      },

      init() {
        let startDay = new Date("2018-06-01");
        this.timestap = parseInt((new Date().getTime() - startDay.getTime()) / (1000 * 3600 * 24));
        // this.getBigScreenSampleList();
        this.getWeather();
        this.pageShow();
        this.getMothTotal();
        this.queryMothSampleSeasonTotal();
        this.getMethodAndPersonAndSampleCount();
        this.getYearSample();
        this.getWorkHour();
        this.getMothRate();
        this.getdateFormat();
        this.getPictureList();
      },
      async getWeather() {
        let result = await axios.get(
          "http://wthrcdn.etouch.cn/weather_mini?city=南京市"
        );
        let weather = result ? result.data.data.forecast[0] : {};
        let high = weather.high;
        let low = weather.low;
        let type = weather.type;
        high = high.replace(/[^0-9|^\-]/gi, "")+"℃";
        low = low.replace(/[^0-9|^\-]/gi, "")+"℃";
        this.weather = type + low +' - ' + high
        if(type.indexOf('雨') > -1){
            this.weatherImg = require('@/assets/img/xaiyu.png');
        }
        if(type.indexOf('晴') > -1){
          this.weatherImg = require('@/assets/img/qingtian.png');
        }
        if(type.indexOf('云') > -1){
          this.weatherImg = require('@/assets/img/tianqi.png');
        }
      },
    },
    mounted() {
      let self = this;
      self.init();
      self.getWeather();
      self.getBigScreenSampleList();
      self.setFullScreen();

      setInterval(() => {
        self.getdateFormat();
      }, 1000);
      setInterval(() => {
        self.init();
      }, 1000 * 60)
      setInterval(() => {
        self.getBigScreenSampleList();
      }, 1000 * 10);
      setInterval(() => {
        self.getWeather();
      }, 1000*60*60*6);
    }
  }
</script>

<style scoped>

</style>
